﻿
@{
    ViewBag.Title = "Index";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
    <script src="https://g.alicdn.com/dingding/open-develop/1.0.0/dingtalk.js" charset="utf-8"></script>
    <style>
        body, div, h1, p {
            margin: 0px;
            padding: 0px;
        }

        body {
            font-size: 14px;
            color: #333;
            background-color: #eee;
        }

        .app-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            overflow-y: scroll;
        }

        .banner-slider {
            width: 100%;
            height: 150px;
            flex-direction: row;
            background-color: white;
            border-width: 1px;
            border-color: #dadada;
            margin-bottom: 17px;
        }

        .banner {
            width: 100%;
            height: 150px;
        }

        .indicator {
            width: 748px;
            height: 280px;
            position: absolute;
            top: 120px;
            item-color: gray;
            item-selectedColor: black;
            item-size: 10px;
        }

        .banner-image {
            width: 100%;
            height: 150px;
        }

        .index-admin {
            width: 100%;
            height: 44px;
            background-color: #fff;
            border-top-color: #e4e4e4;
            border-top-style: solid;
            border-top-width: 1px;
            border-bottom-color: #e4e4e4;
            border-bottom-style: solid;
            border-bottom-width: 1px;
        }

        .admin {
            position: relative;
            padding-left: 12.5px;
            padding-right: 12.5px;
            height: 44px;
        }

        .admin-image {
            width: 16.5px;
            height: 16.5px;
            position: absolute;
            top: 12.5px;
        }

        .admin-hello {
            font-size: 17px;
            color: #999;
            float: left;
            padding-left: 26px;
            padding-top: 10.5px;
        }

        .admin-edit {
            font-size: 17px;
            color: #38ADFF;
            position: absolute;
            right: 12px;
            top: 10.5px;
        }

        .index-item {
            position: relative;
            width: 100%;
            height: 80px;
            margin-bottom: 17px;
        }

        .index-item-center {
            position: relative;
            height: 80px;
            background-color: #fff;
            overflow: hidden;
        }

        .index-item-con {
            width: 100%;
            height: 80px;
            display: flex;
            padding-top: 11px;
            padding-bottom: 18px;
            flex-direction: row;
            justify-content: space-between;
            border-bottom-color: #eee;
            border-bottom-style: solid;
            border-bottom-width: 1px;
        }

        .item {
            flex: 1;
            margin-right: 1px;
        }

        .item-right-line {
            border-right-color: #eee;
            border-right-style: solid;
            border-right-width: 1px;
        }

        .item-number {
            font-size: 24px;
            font-weight: 500;
            text-align: center;
        }

        .item-text {
            font-size: 13px;
            color: #999;
            margin-top: 4px;
            padding-bottom: 4px;
            text-align: center;
        }

        .index-userlist {
            background-color: #fff;
        }

        .index-userlist-item {
            position: relative;
        }

        .index-title {
            position: relative;
            height: 49px;
        }

        .index-text {
            position: absolute;
            font-size: 15px;
            color: #323334;
            left: 12px;
            top: 16.5px;
        }

        .index-userlist-line {
            background-color: rgba(228, 228, 228, 1);
            height: 1px;
            width: calc(100% - 11.5px);
            position: absolute;
            left: 11.5px;
            bottom: 0px;
        }

        .index-all-applist {
            margin-top: 16px;
            background-color: #fff;
            border-top-color: #e4e4e4;
            border-top-width: 1px;
            border-top-style: solid;
        }

        .applist-title {
            width: 100%;
            height: 49px;
            position: relative;
        }

        .applist-text {
            color: #999;
            font-size: 17px;
            position: absolute;
            top: 16px;
            left: 12px;
        }

        .add-manager {
            width: 100%;
            height: 44px;
            background-color: #fff;
            border-bottom-color: rgba(228, 228, 228, 1);
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-top-color: rgba(228, 228, 228, 1);
            border-top-style: solid;
            border-top-width: 1px;
            margin-bottom: 10px;
        }

        .add-manager-container {
            position: relative;
            width: 100%;
            height: 44px;
        }

        .add-manager-text {
            color: #323334;
            padding-left: 42px;
            padding-top: 12px;
            font-size: 17px;
        }

        .add-manager-add-icon {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 15px;
            left: 12px;
        }

        .add-manager-more-icon {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 15px;
            right: 12px;
        }

        .grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .cell {
            width: 25%;
            position: relative;
            margin-bottom: 20px;
        }

        .cell-image-container {
            width: 50px;
            height: 49px;
            position: relative;
            border-radius: 10px;
            background-color: #f8f8f8;
            overflow: hidden;
            margin: 0 auto;
        }

        .cell-text {
            text-align: center;
            color: #323334;
            font-size: 13px;
            margin-top: 12px;
        }

        .cell-mount {
            color: #323334;
            font-size: 20px;
            text-align: center;
        }

        .cell-unit {
            color: #999;
            font-size: 10px;
        }

        .cell-tag {
            text-align: center;
            color: #999;
            font-size: 10px;
            margin-top: 4.5px;
        }

        .cell-app-type-container {
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, .2);
            margin: 0;
            padding: 0;
            height: 13px;
        }

        .cell-app-type {
            font-size: 8px;
            color: #fff;
            text-align: center;
            line-height: 13px;
        }

        .cell-image {
            width: 50px;
            height: 49px;
            border-radius: 10px;
        }

        .cell-image-container {
            width: 50px;
            height: 49px;
            position: relative;
            border-radius: 10px;
            background-color: #f8f8f8;
            overflow: hidden;
            margin: 0 auto;
        }

        .cell-image {
            width: 50px;
            height: 49px;
            border-radius: 10px;
        }

        .cell-text {
            text-align: center;
            color: #323334;
            font-size: 13px;
            margin-top: 12px;
        }
    </style>
    <link rel="stylesheet" href="./app.css">
</head>
<body>
    <div id="app-container">
        <div class="app-container">
            <div class="banner-slider">
                <div class="banner">
                    <img src="https://gw.alicdn.com/tps/TB1o8BqOpXXXXanXVXXXXXXXXXX-750-300.png" class="banner-image">
                </div>
            </div>
            <div class="index-admin">
                <div class="admin">
                    <div class="admin-manager">
                        <img src="" class="admin-image">
                        <div class="admin-hello">

                        </div>
                    </div>
                    <div class="admin-edit">编辑分组</div>
                </div>
            </div>
            <div class="index-userlist">
                <div class="index-userlist-item">
                    <div class="index-title">
                        <div class="index-text">经营数据</div>
                    </div>
                    <div class="grid">
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <div class="cell-mount">0</div>
                                        <div class="cell-unit"></div>
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">智能报表</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">支付宝收入</div>
                                    <div class="cell-tag">营业日报</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <div class="cell-mount">0</div>
                                        <div class="cell-unit"></div>
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">智能报表</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">日总营业额</div>
                                    <div class="cell-tag">营业日报</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="index-userlist-line"></div>
                </div>
                <div class="index-userlist-item">
                    <div class="index-title">
                        <div class="index-text">门店运营</div>
                    </div>
                    <div class="grid">
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://landray.dingtalkapps.com/alid/app/report/images/ico-png/25.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">日志</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">营业日报</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://landray.dingtalkapps.com/alid/app/report/images/ico-png/24.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">日志</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">门店水电煤月报</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1q5U5OXXXXXXPXVXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">打折免单申请</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="index-userlist-line"></div>
                </div>
                <div class="index-userlist-item">
                    <div class="index-title">
                        <div class="index-text">巡店督导</div>
                    </div>
                    <div class="grid">
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="http://static.dingtalk.com/media/lALOcrvqOszIzMg_200_200.png" class="cell-image">
                                    </div>
                                    <div class="cell-text">签到</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://landray.dingtalkapps.com/alid/app/report/images/ico-png/0.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">日志</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">巡检日报</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="index-userlist-line"></div>
                </div>
                <div class="index-userlist-item">
                    <div class="index-title">
                        <div class="index-text">企划营销</div>
                    </div>
                    <div class="grid">
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB12R3NOXXXXXcwaXXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">营销活动申请</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1Pb4eOpXXXXcGXpXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">宣传物料申请</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="index-userlist-line"></div>
                </div>
                <div class="index-userlist-item">
                    <div class="index-title">
                        <div class="index-text">人力资源</div>
                    </div>
                    <div class="grid">
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="http://static.dingtalk.com/media/lALOcsYpu8zIzMg_200_200.png" class="cell-image">
                                    </div>
                                    <div class="cell-text">考勤打卡</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1hcBoOpXXXXbPXXXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">请假</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1GCw.OXXXXXbOXFXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">入职申请单</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1ESwQOXXXXXbaaXXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">离职申请单</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1.vAMOXXXXXXmaFXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">薪资调整申请</div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cell-box">
                                <div>
                                    <div class="cell-image-container">
                                        <img src="https://gw.alicdn.com/tps/TB1UEoTOXXXXXbCaXXXXXXXXXXX-102-102.png" class="cell-image">
                                        <div class="cell-app-type-container">
                                            <div class="cell-app-type">审批</div>
                                        </div>
                                    </div>
                                    <div class="cell-text">调岗申请单</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="index-all-applist">
                <div class="applist-title">
                    <h1 class="applist-text">全部应用</h1>
                </div>
                <div class="grid">
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcrvqOszIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">签到</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsYpu8zIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">考勤打卡</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsZGkszIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">日志</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsZHFszIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">公告</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsZGQszIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">审批</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsah9MzIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">钉邮</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsahiMzIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">钉盘</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsxZiszIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">智能报表</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsajBszIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">电话会议</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcsaifMzIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">视频会议</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOjlM0h8zIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">客户管理</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOcevpQczIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">办公电话</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell-box">
                            <div class="cell-image-container">
                                <img src="http://static.dingtalk.com/media/lALOa28YQMzIzMg_200_200.png" class="cell-image">
                            </div>
                            <div class="cell-text">阿里商旅</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-manager">
                <div class="add-manager-container">
                    <img src="https://gw.alicdn.com/tps/TB1O.peOFXXXXbvXpXXXXXXXXXX-42-42.png" class="add-manager-add-icon">
                    <div class="add-manager-text">添加/管理</div>
                    <img src="https://gw.alicdn.com/tps/TB12pIZOpXXXXaxXVXXXXXXXXXX-16-28.jpg" class="add-manager-more-icon">
                </div>
            </div>
        </div>
    </div>
    <script>

        (function () {
            var OPENAPIHOST = 'http://30.27.108.2:3000';
            var isDingtalk = /DingTalk/.test(navigator.userAgent);
            var proper = {};
            var _userId = '';
            var _userInfo = {};
            Object.defineProperty(proper, 'userId', {
                enumerable: true,
                get: function () {
                    return _userId;
                },
                set: function (newValue) {
                    _userId = newValue;
                    getUserInfo(proper.userId);
                }
            });
            Object.defineProperty(proper, 'userInfo', {
                enumerable: true,
                get: function () {
                    return _userInfo;
                },
                set: function (newValue) {
                    _userInfo = newValue;
                    updateUI();
                }
            });

            function parseCorpId(url, param) {
                var searchIndex = url.indexOf('?');
                var searchParams = url.slice(searchIndex + 1).split('&');
                for (var i = 0; i < searchParams.length; i++) {
                    var items = searchParams[i].split('=');
                    if (items[0].trim() == param) {
                        return items[1].trim();
                    }
                }
            }
            function openLink(url, corpId) {
                if (corpId && typeof corpId === 'string') {
                    if (url && url.indexOf('$CORPID$') !== -1) {
                        url = url.replace(/\$CORPID\$/, corpId);
                    }
                }
                if (isDingtalk) {
                    dd.biz.util.openLink({
                        url: url,
                        onSuccess: function () {
                            if (typeof corpId === 'function') {
                                corpId();
                            }
                        },
                        onFail: function () {
                            if (typeof corpId === 'function') {
                                corpId();
                            }
                        }
                    });
                } else {
                    window.open(url);
                }
            }

            function updateName() {
                var dateTime = new Date().getHours();
                var isAdmin = proper.userInfo.isAdmin;
                var name = proper.userInfo.name;
                var nb = {};
                if (name) {
                    if (dateTime >= 5 && dateTime <= 12) {
                        nb.wh = isAdmin ? '早上好，管理员，' + name : '早上好，' + name;
                        nb.whImage = 'https://gw.alicdn.com/tps/TB1ubtjOFXXXXbzXpXXXXXXXXXX-36-36.jpg';
                    } else if (dateTime > 12 && dateTime <= 18) {
                        nb.wh = isAdmin ? '下午好，管理员，' + name : '下午好，' + name;
                        nb.whImage = 'https://gw.alicdn.com/tps/TB1ubtjOFXXXXbzXpXXXXXXXXXX-36-36.jpg';
                    } else {
                        nb.wh = isAdmin ? '晚上好，管理员，' + name : '晚上好，' + name;
                        nb.whImage = 'https://gw.alicdn.com/tps/TB15FNwOFXXXXbqXXXXXXXXXXXX-36-36.jpg';
                    }
                }
                return nb;
            }

            function updateUI() {
                var nb = updateName();
                var html = '<img src="' + nb.whImage + '" class="admin-image">'
                + '<div class="admin-hello">'
                + nb.wh
                + '</div>';
                $('.admin-manager').html(html);
            }

            function getUserId(corpId) {
                authCode(corpId).then(function (result) {
                    var code = result.code;
                    var getUserIdRequest = {
                        url: OPENAPIHOST + '/api/get-user-info?code=' + code,
                        type: 'GET',
                        dataType: 'json',
                        success: function (response) {
                            if (response.errcode === 0) {
                                proper.userId = response.userid;
                            } else {
                                alert(JSON.stringify(response) + 'getUserId');
                            }
                        },
                        error: function (err) {
                            alert(JSON.stringify(err));
                        }
                    }
                    $.ajax(getUserIdRequest);
                }).catch(function (error) {
                    alert(JSON.stringify(error));
                });
            }

            function authCode(corpId) {
                return new Promise(function (resolve, reject) {
                    dd.ready(function () {
                        dd.runtime.permission.requestAuthCode({
                            corpId: corpId,
                            onSuccess: function (result) {
                                resolve(result);
                            },
                            onFail: function (err) {
                                reject(err);
                            }
                        });
                    });
                });
            }

            function getUserInfo(userid) {
                var getUserInfoRequest = {
                    url: OPENAPIHOST + '/api/get?userid=' + userid,
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        if (response.errcode === 0) {
                            proper.userInfo = response;
                        } else {
                            alert(JSON.stringify(response) + 'getUserInfo');
                        }
                    },
                    error: function (err) {

                    }
                };
                $.ajax(getUserInfoRequest);
            }

            $(function () {

                $('.banner-image').on('click', function () {
                    const url = 'https://alimarket.m.taobao.com/markets/dingtalk/cydd?lwfrom=20161118115327653';
                    openLink(url);
                });

                $('.item').on('click', function () {

                });
                dd.error(function (err) {
                    alert(JSON.stringify(err));
                });
                var originalUrl = location.href;
                var corpId = parseCorpId(originalUrl, 'corpId');
                var jsApiList = [];
                var signRequest = {
                    url: OPENAPIHOST + '/api/jsapi-oauth?href=' + encodeURIComponent(location.href),
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        if (response.errcode === 0) {
                            const config = {
                                agentId: response.agentId || '',
                                corpId: response.corpId || '',
                                timeStamp: response.timeStamp || '',
                                nonceStr: response.nonceStr || '',
                                signature: response.signature || '',
                                jsApiList: jsApiList || []
                            };
                            dd.config(config);
                            getUserId(corpId);
                        } else {
                            alert(JSON.stringify(response) + 'sign');
                        }
                    },
                    error: function () {

                    }
                };
                $.ajax(signRequest);
            });
        })();
    </script>
</body>
</html>
